<template>
	<div>
		<dv-loading v-if="isShowLoading" class="loading">Loading...</dv-loading>
		<div class="loginbody">
			<div class="logindata">
				<div class="logintext">
					<h2>Welcome</h2>
				</div>
				<div class="formdata">
					<el-form ref="form" :model="form" :rules="rules">
						<el-form-item prop="username" class="form-deep">
							<el-input
								class="input-deep"
								v-model="form.username"
								clearable
								placeholder="请输入账号"
							></el-input>
						</el-form-item>
						<el-form-item prop="password" class="form-deep">
							<el-input
								class="input-deep"
								v-model="form.password"
								clearable
								placeholder="请输入密码"
								show-password
							></el-input>
						</el-form-item>
					</el-form>
				</div>
				<div class="butt">
					<el-button type="primary" @click.prevent="login('form')">登录</el-button>
					<el-button @click="resetForm('form')">重置</el-button>
				</div>
			</div>
		</div>

		<particles></particles>
	</div>
</template>

<script>
import Particles from '@/components/particles/index'
import * as loginPage from '@/api/index'
export default {
	name: 'Login',
	components: { Particles },
	data() {
		return {
			isShowLoading: false,
			form: {
				password: '',
				username: '',
			},
			checked: false,
			rules: {
				username: [
					{ required: true, message: '请输入用户名', trigger: 'blur' },
					{ max: 10, message: '不能大于10个字符', trigger: 'blur' },
				],
				password: [
					{ required: true, message: '请输入密码', trigger: 'blur' },
					{ max: 10, message: '不能大于10个字符', trigger: 'blur' },
				],
			},
		}
	},
	methods: {
		login(form) {
			this.$refs[form].validate(async (valid) => {
				if (valid) {
					this.isShowLoading = true
				    const res = await loginPage.login(this.form)
					if (res.data.status === 200) {
						localStorage.setItem('token', res.data.token)
						this.$message({
							message: '登录成功啦',
							type: 'success',
							showClose: true,
						})
						this.$router.replace('/my-template')
					} else {
						this.$message({
							message: '账户名或密码错误',
							type: 'error',
							showClose: true,
						})
					}
				}

				this.isShowLoading = false
			})
		},
		resetForm(formName) {
			this.$refs[formName].resetFields()
		},
	},
}
</script>

<style scoped>
.loginbody {
	width: 400px;
	height: 400px;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1000;
}
.logintext {
	line-height: 50px;
	text-align: center;
	font-size: 30px;
	font-weight: bolder;
	color: white;
	text-shadow: 2px 2px 4px #000000;
}
.butt {
	margin-top: 10px;
	text-align: center;
}
.shou {
	cursor: pointer;
	color: #606266;
}
.input-deep >>> .el-form-item__error >>> .el-input__inner {
	border: 1px solid #3f6494;
}
::v-deep .el-form-item.is-error .el-input__inner {
	border-color: #f1b75f;
}
.loading {
	width: 200px;
	height: 100px;
	z-index: 1000;
	position: fixed;
	left: 50%;
	top: 10%;
	transform: translate(-50%, -50%);
	color: #e49e35;
}
::v-deep .el-button--primary {
	background-color: #3f6494;
}
</style>